<template>
    <div class="maptools-content">
        <el-popover
                placement="left-end"
                width="200"
                trigger="click">
            <div class="maptools-info">
                <div class="maptools-info-title">
                    <span>影像/地图</span>
                </div>
                <div class="maptools-info-map">
                    <div class="maptools-info-map-detail" :style="yxstyle" @click="changemap('电子影像')">
                        <img src="../../../assets/img/legend/img_c.png" style="width: 60px;height: 40px;" alt="" title="电子影像">
                        <span>电子影像</span>
                    </div>
                    <div class="maptools-info-map-detail" :style="dtstyle" @click="changemap('电子地图')">
                        <img src="../../../assets/img/legend/vec_c.png" style="width: 60px;height: 40px;margin: auto auto" alt="" title="电子地图">
                        <span>电子地图</span>
                    </div>

                </div>

            </div>
            <div slot="reference" >
                <el-button type="primary" icon="el-icon-reading" circle title="影像/地图"></el-button>
            </div>

        </el-popover>
    </div>

</template>
<script>
    export default {
        data(){
            return{
                yxstyle:null,
                dtstyle:null
            }
        },
        methods:{
            changemap(val){
                this.$emit('selectmapimg',val);
                if(val=='电子影像'){
                    this.yxstyle="border:solid 2px blue; "
                    this.dtstyle=null

                }else{
                    this.dtstyle="border:solid 2px blue; "
                    this.yxstyle=null
                }

            },

        },
    };
</script>
<style lang="scss" scoped>
    .maptools-content{
        position: absolute;
        padding: 0;
        opacity: 1;
        z-index: 1;
        right: 1.2%;
        bottom: 7%;
        background: transparent;
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }
    .maptools-info-title{
        font-weight: bolder;
        font-size: 14px;
        color: #0f0756;
    }
    .maptools-info{
        display: flex;
        flex-direction: column;
    }
    .maptools-info-map{
        display: flex;
        flex-direction: row;
        margin-top: 2px;
        /*margin: auto auto;*/
    }
    .maptools-info-map-detail{
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #0f0756;
        margin-left: 5px;
        align-items: center;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    }

</style>
